<template>
		<scroll-view class="list" scroll-y="true" @scrolltolower="loadMore">
			<view class="noinfo" v-if="history.length==0">无浏览历史</view>
			<view class="history" v-else>
				<block v-for="(item,index) in history" :key="index">
					<view class="history-item" @click="lishitodetail(item.key.id,item.who,item.isweb)" v-if="index<isload">
						<image class="his-img" :src="item.key.picture" v-if="item.key.picture"></image>
						<view :class="'his-title fontsize'+fontsizenub">{{item.key.title}}</view>
					</view>
				</block>
			</view>
			<view class="loadings">
				{{loadingText}}
			</view>
		</scroll-view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				history:[],
				isload:10,
				loadingText: '上拉加载更多',
				refreshText: '下拉可以刷新',
				commonurl:common.csurl
			};
		},
		onLoad(event) {
			var that = this;
			uni.getStorage({
				key:'lishi',
				success(res){
					that.history = res.data;
				}
			})
		},
		methods:{
			loadMore(){
				if(this.isload+10<this.history.length){
					this.isload+=10
				}else{
					this.loadingText = '没有更多数据了'
					this.isload = this.history.length
				}
				this.$forceUpdate();
			},
			lishitodetail(id,who,isweb){
				if(isweb){
					uni.navigateTo({
						url: '/pages/webview/webview?type='+ who +'&id='+id
					});
				}else{
					uni.navigateTo({
						url: '/pages/xq/xq?type='+ who +'&id='+id
					});
				}
			}
		},
		computed:{
			...mapState(['fontsizenub'])
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@include fontsizefn(".his-title",30upx);
	page{
		background-color: $bgcolor;
		height:100%;
	}
	.list{
		width: 750upx;
		height: 100%;
	}
	.noinfo{
		text-align:center;
		font-size:34upx;
		margin-top:200upx;
		color:$titlecolor;
	}
	.history{
		padding:0 24upx;
		background:#fff;
		margin-top:24upx 0;
	}
	.history-item{
		border-bottom:1px solid #ccc;
		padding:20upx 0;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:flex-start;
		align-items:flex-start;
	}
	.his-img{
		width:240upx;
		height:135upx;
		margin-right:20upx;
		vertical-align:middle;
	}
	.his-title{
		flex:1;
		line-height:50upx;
		height:100upx;
		vertical-align:middle;
		color:$titlecolor;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.loadings {
		padding: 20upx 0;
		text-align:center;
		font-size:30upx;
		color:#ccc;
	}
</style>
